<template>
  <div>
    <div class="aaa">图片相关组件</div>
    <!-- <img v-lazyload src="../../assets/img/01电网管理平台-保供电全景重要级别测试.png" alt="">
    <img v-lazyload src="../../assets/img/03电网管理平台-保供电-电源一张图-会展中心.png" alt=""> -->

    <div v-for="(item) in imgArr" :key="item.id">
      <img v-lazyload :src="item.imgUrl" alt="">
    </div>
    <!-- <img :src="imgUrl" alt=""> -->
  </div>
</template>

<script>
  export default {
      data(){
         return {
          // imgUrl: require("../../assets/img/03电网管理平台-保供电-电源一张图-会展中心.png"),
          imgArr:[
            {id:0, imgUrl: require("../../assets/img/01电网管理平台-保供电全景重要级别测试.png")},
            {id:1, imgUrl: require("../../assets/img/02电网管理平台-保供电-电源一张图.png")},
            {id:2, imgUrl: require("../../assets/img/03电网管理平台-保供电-电源一张图-会展中心.png")},
          ]
         }
      },
      directives:{
        lazyload:{
          inserted(el){
        document.body.scrollTop = "0px"

            var imgUrl = el.src
            el.src = ""   // 这样子写一开始就不会加载图片了

            // 构造一个 观察者对象
            var observer = new IntersectionObserver((ertries)=>{  // [{isIntersecting}]：从ertries中解构出来,先从数组中解构出元素项，再解构元素项对象的属性
              // 在它所观察的元素进入可视区域，离开可视区域的时候执行这个 回调函数。
              // console.log("触发了：", ertries);   //ertries 是一个数组
              if(ertries[0].isIntersecting){
                // 加载图片
                el.src = imgUrl
                observer.unobserve(el)  //取消观察的方法。
              }
            })
            observer.observe(el)  //指定要观察的元素对象
          }
        }
      },
      beforeRouteEnter(){

      },
      mounted(){
      }
      
  }
</script>
<style lang='less' scoped>
  .aaa{
    height: 1100px;
    background-color: pink;
    margin-bottom: 400px;
  }
  img{
    transform-origin: left top;
    transform: scale(0.75,0.5);
  }
</style>